<template>
  <div class="product-select">
    <div class="product-select-cont" @click='handleClick(item)' v-for="item in currentProduct" :key="item.productId">
      <div class="header">
        <span class="left">{{item.productName}}</span>
        <img v-if="products.length > 1" class="check" :src="require(`@/assets/imgs/icon-${getCheck(item.productId) ? 'check' : 'uncheck'}.png`)" alt="">
      </div>
      <div class="item" v-if="feeInfoShow" >
        <span class="left">Loan amount</span>
        <div class="right" @click='handleshowFee(item, $event)'><span>₱</span> {{item.contractAmount | formatCurrency(',')}}<img class="check" src="~@/assets/imgs/icon-addorder-right.png" alt=""></div>
      </div>
      <div class="item" v-if="feeInfoShow">
        <span class="left">Management fee</span>
        <div class="right details" @click='handleshowManage(item, $event)'>View details</div>
      </div>
    </div>
    <div class="open-close" @click="handleOpen" v-if="products.length > 2">{{open ? 'Close' : 'Expend'}}<img :src="require(`@/assets/imgs/icon-${open ? 'up' : 'down'}.png`)" alt=""></div>
    <!-- Loan Information -->
    <feeDetails :fees="feeInfo" :coin="true" v-model="showFee"></feeDetails>
    <manageDetail :fees="feeInfo"  :coin="true" v-model="showManage"></manageDetail>
  </div>
</template>

<script>
import feeDetails from '../feeDetails1'
import manageDetail from '../manageDetail'
import { mapState } from 'vuex'
export default {
  name: 'product-select',
  props: {
    pageTrackerInfo: {
      type: Object,
      default: () => {}
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  components: {
    feeDetails,
    manageDetail
  },
  computed: {
    ...mapState({
      productOrderInfo: state => state.product.productOrderInfo
    }),
  },
  watch: {
    value: {
      handler (val) {
        this.checkIds = val
      },
      deep: true,
      immediate: true
    },
  },
  data () {
    return {
      feeInfoShow: false,
      showFee: false,
      showManage: false,
      checkIds: [],
      open: false,
      products: [],
      currentProduct: [],
      feeInfo: {}
    }
  },
  methods: {
    getCheck (id) {
      return this.checkIds.findIndex(item => item.productId == id) > -1
    },
    getInterestChargesSwitch() {
      this.$api.switch().then(res => {
          let { status, error, data } = res;
          if (status == '1' && error == '00000000') {
              if (data === 1) {
                  //open
                  this.feeInfoShow = true;
              } else {
                  //close
                  this.feeInfoShow = false;
              }
          }
      });
    },
    handleOpen () {
      this.open = !this.open
      if (this.open) {
        // 确认借款页展开点击
        this.$buryPoint.action({
          eventName: 'payInfo_expand_click',
          ...this.pageTrackerInfo
        });
        this.currentProduct = this.products
      }
      else this.currentProduct = this.products.slice(0, 2)
    },
    handleshowFee (product, e) {
      e.stopPropagation()
      this.showFee = true
      this.feeInfo = product
      // 确认借款页额度明细点击
      this.$buryPoint.action({
        eventName: 'payInfo_loanAmount_click',
        eventValue: { productId: product.productId },
        ...this.pageTrackerInfo
      });
    },
    handleshowManage (product, e) {
      e.stopPropagation()
      this.showManage = true
      this.feeInfo = product
      // 确认借款页管理费明细点击
      this.$buryPoint.action({
        eventName: 'payInfo_ManagementFee_click',
        eventValue: { productId: product.productId },
        ...this.pageTrackerInfo
      });
    },
    handleClick (product) {
      if (this.products.length <= 1) {
        return
      }
      const { productId, reloan } = product
      const index = this.checkIds.findIndex(item => item.productId == productId)
      if (index > -1 ) {
        // 确认借款页取消勾选产品点击
        this.$buryPoint.action({
          eventName: 'payInfo_cancelProduct_click',
          eventValue: { productId },
          ...this.pageTrackerInfo
        });
        this.checkIds.splice(index, 1)
      }
      else this.checkIds.push({ productId, reloan })
      this.$emit('input', this.checkIds)
    }
  },
  created () {
    this.getInterestChargesSwitch()
  },
  mounted () {
    this.pageStartAction()
    let eventValue = {}
    const product = this.productOrderInfo
    if (product.custApplyProductList) {
      const { custApplyProductList } = product
      this.products = custApplyProductList
      this.currentProduct = custApplyProductList.length > 2 ? custApplyProductList.slice(0, 2) : custApplyProductList
      // 埋点-----------------------
      const productIds = custApplyProductList.map(item => item.productId)
      eventValue.productIds = productIds
    } else {
      this.products = [product]
      this.currentProduct = [product]
      // 埋点--------------------- 
      eventValue.productId = product.productId
    }
    this.checkIds = this.products.map(item => ({
      productId: item.productId,
      reloan: item.reloan
    }))
    this.$emit('input', this.checkIds)
    // 确认借款页页面曝光
    this.$buryPoint.action({
      eventName: 'payInfo_page_show',
      eventValue,
      ...this.pageTrackerInfo
    });
  }
}
</script>

<style lang='scss'>
.product-select {
  padding: 0 40px;
  &-cont {
    border-radius: 32px;
    margin-top: 32px;
    background-color: #fff;
    padding: 42px 24px;
    font-size: 32px;
    & > .header, & > .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    & > .header {
      & > .left {
        color: #111;
        font-weight: bold;
      }
      & > .check {
        width: 48px;
      }
    }
    & > .item {
      margin-top: 32px;
      & > .left {
        color: #555;
      }
      & > .right {
        color: #000;
        font-weight: bold;
        font-size: 32px;
        display: flex;
        align-items: center;
        & > span {
          margin-right: 6px;
          font-weight: bold;
        }
        & > img {
          width: 28px;
          margin-left: 8px;
        }
        &.details {
          color: #EC5958;
          line-height: 40px;
        }
      }
    }
  }
  .open-close {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      font-size: 24px;
      
      margin-top: 24px;
      & >  img {
        width: 34px;
        margin-left: 16px;
      }
    }
}
</style>